<%--
  Created by IntelliJ IDEA.
  User: LYK
  Date: 2017/5/2
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
	<title>ztree</title>
	<jsp:include page="/static/commonviews/header.jsp"/>
</head>
<body>

<div class="container bs-docs-container">
	<div class="row">
		<!--左侧-->
		<div class="col-md-9" role="main">
			<div class="doc-section">
				<h2 class="page-header">ztree</h2>
				<p>zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点</p>
			</div>

			<div class="doc-section">
				<h2 class="page-header">示例</h2>
				<ul id="treeDemo" class="ztree"></ul>
			</div>

		</div>
	</div>
</div>


<jsp:include page="/static/commonviews/footer.jsp"/>
<script>
	var setting = {
		view : {
			showLine:false,//节点连线
			nameIsHTML: true ,//设置 name 属性是否支持 HTML 脚本
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
		},
		edit:{
			enable:true,
			removeTitle:'删除节点',
			renameTitle:'修改节点名称',
			showRemoveBtn:showRemoveBtn,
			showRenameBtn:showRenameBtn,
		},
		data: {
			keep:{
				leaf:false,
				parent:true
			},
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick
		}
	};


	var zNodes =[
		{ id:1, pId:0, name:"主页", open:false ,icon:'../../static/ztree/css/zTreeStyle/img/diy/1_open.png'},
		{ id:11, pId:1, name:"资讯管理", open:true,icon:'../../static/ztree/css/zTreeStyle/img/diy/8.png'},
		{ id:111, pId:11, name:"资讯管理",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:12, pId:1, name:"图片管理", open:true,icon:'../../static/ztree/css/zTreeStyle/img/diy/8.png'},
		{ id:121, pId:12, name:"图片管理",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:13, pId:1, name:"产品管理", open:true,icon:'../../static/ztree/css/zTreeStyle/img/diy/8.png'},
		{ id:131, pId:13, name:"品牌管理",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:132, pId:13, name:"分类管理",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:133, pId:13, name:"产品管理",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:14, pId:1, name:"评论管理", open:true,icon:'../../static/ztree/css/zTreeStyle/img/diy/8.png'},
		{ id:141, pId:14, name:"评论列表",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
		{ id:142, pId:14, name:"意见反馈",icon:'../../static/ztree/css/zTreeStyle/img/diy/2.png'},
	];

	function onClick(event, treeId, treeNode, clickFlag) {
		layer.msg('你点击了'+treeNode.name+'这个节点');
	}

	function showRemoveBtn(treeId, treeNode) {
		return !treeNode.isFirstNode;
	}
	function showRenameBtn(treeId, treeNode) {
		return !treeNode.isLastNode;
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			layer.prompt({
				title:'请输入节点名称'
			},function (val,index) {
				if(val!== undefined){
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					var childNode = {id:(100+newCount),pId:treeNode.id,name:val,icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'}
					zTree.addNodes(treeNode, childNode);
				}
				layer.close(index);
			});
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};

	$(function () {
		/*生成ztree*/
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	})

</script>

</body>
</html>
